<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <style>
    .ajax_loading {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100000;
        /* 开启硬件加速 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .ajax_loading.absolute {
        position: absolute;
    }

    .ajax_loading .info {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -7px 0 0 -7px;
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        margin: 6px;
        border: 2px solid #666;
        border-bottom-color: transparent;
        vertical-align: middle;
        -webkit-animation: rotate 0.75s linear infinite;
        animation: rotate 0.75s linear infinite;
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    </style>
</head>

<body>
    <div id="test"></div>
    <script>
    var AjaxLoading = (function() {
        var AjaxLoadingFun = function() {};
        AjaxLoadingFun.prototype.open = function(fng) {
            var options = $.extend(true, {
                target: "body"
            }, fng);
            this.dom = $("<div>", {
                "class": "ajax_loading"
            }).html('<div class="info"></div>');
            options.target != "body" ? this.dom.addClass("absolute") : "";
            // console.log(this.dom)
            $(options.target).append(this.dom);
        };
        AjaxLoadingFun.prototype.remove = function(fng) {
            switch (fng) {
                case "hide":
                    this.dom.remove();
                default:
                    this.dom.fadeOut(300, function() {
                        $(this).remove();
                    });
            }
        };

        return AjaxLoadingFun;
    })();


    $(function() {
        var G_loading = new AjaxLoading();
        G_loading.open({
            target: "#test"
        });

    });
    // window.AjaxLoading = AjaxLoading;
    </script>
</body>

</html>
